<template>
    <div class="sectionType">
        <el-form ref="form" :model="formSearch" label-width="80px" :inline="true">
            <el-form-item label="设备类型">
                <el-select v-model="formSearch.devType" placeholder="请选择类型" size="small">
                    <el-option label="公区报警" value="1"></el-option>
                    <el-option label="室内报警" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" @click="cleanObj,upOrAdd=1,dialogTableVisible=true">新增对照表</el-button>
                <el-button size="small" @click="getList">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-table :data="tableData" style="width:100%;">
            <el-table-column label="IP名称" prop="ipName"></el-table-column>
            <el-table-column label="设备名称" prop="devName"></el-table-column>
            <el-table-column label="设备类型" prop="devType">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.devType == 1 ? '主机设备' :
                        scope.row.devType == 2 ? '室内设备' : ''}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div>
                        <el-button type="danger" size="small" @click="delMapping(scope.row.id)">删除</el-button>
                        <el-button type="warning" size="small"
                            @click="upOrAdd=2,updateForm=scope.row,dialogTableVisible=true">修改</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <paging @changePage='handleCurrentPage' :get-total='total'></paging> -->

        <el-dialog :title="upOrAdd==1?'新增':'修改'" :visible.sync="dialogTableVisible">
            <el-form ref="form" :model="updateForm" label-width="100px" :rules="rules">
                <el-form-item label="设备地址" prop="ipName">
                    <el-input v-model="updateForm.ipName"></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="devName">
                    <el-input v-model="updateForm.devName"></el-input>
                </el-form-item>
                <el-form-item label="设备类型" prop="devType">
                    <el-select v-model="updateForm.devType" placeholder="请选择类型">
                        <el-option label="主机报警" value="1"></el-option>
                        <el-option label="室内报警" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateOrAdd">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import paging from '../../components/paging.vue';
import {
    getDeviceMap,
    delDeviceMap,
    addDeviceMap,
    updateDeviceMap,
} from '../../url/api';
export default {
    data() {
        return {
            upOrAdd: 0, // 1新增 2修改
            dialogTableVisible: false,
            tableData: [],
            formSearch: {
                current: 1,
                size: 10,
                devType: "1",
            },
            updateForm: {
                ipName: '',
                devName: '',
                devType: '1',
            },
            total: 0,
            rules: {
                ipName: [
                    {
                        required: true,
                        message: '请输入IP名称',
                        trigger: 'blur',
                    },
                ],
                devName: [
                    {
                        required: true,
                        message: '请输入设备名称',
                        trigger: 'blur',
                    },
                ],
                devType: [
                    {
                        required: true,
                        message: '请选择设备类型',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    methods: {
        cleanObj(){
            this.$nextTick(()=>{
                this.updateForm = {
                ipName: '',
                devName: '',
                devType: 1,
            }
            })
        },
        /* 新增or修改  1新增 2修改 */
        updateOrAdd() {
            // this.updateForm.devType = +this.updateForm.devType;
            if (this.upOrAdd == 1) {
                addDeviceMap(this.updateForm).then((res) => {
                    if (res.data.ok) {
                        this.$message.success('新增成功');
                        this.getList();
                        this.dialogTableVisible = false;
                    }
                });
            }
            if (this.upOrAdd == 2) {
                updateDeviceMap(this.updateForm).then((res) => {
                    if (res.data.ok) {
                        this.$message.success('修改成功');
                        this.getList();
                        this.dialogTableVisible = false;
                    }
                });
            }
            this.cleanObj();
        },
        delMapping(id) {
            delDeviceMap(id).then((res) => {
                if (res.data.ok) {
                    this.$message.success('删除成功');
                    this.getList();
                }
            });
        },
        getList() {
            this.formSearch.current= 1;
            getDeviceMap(this.formSearch).then((res) => {
                if (res.data.ok) {
                    this.tableData = res.data.data;
                    this.sendData();
                } else {
                    this.tableData = [];
                }
            });
        },
        sendData(){
        console.log('emit加载')
        this.Bus.$emit('comsendTableData',{
          formSearch:this.formSearch,
          // total:this.total
      })
      },
        handleCurrentPage(val) {
            this.formSearch.current = val;
            this.getList();
        },
    },
    mounted() {
        this.getList();
    },
    components: {
        paging,
    },
};
</script>

<style scoped lang='scss'>
.sectionType {
    background: #fff;
    width: 100%;
}
</style>
